<template>
  <div class="stock-selector h-screen bg-gray-100 p-6">
    <header class="mb-6">
      <h1 class="text-3xl font-bold text-gray-800">股票选择器</h1>
      <p class="text-gray-600">智能筛选优质股票，把握投资机会</p>
    </header>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 左侧 - 股票筛选和列表 -->
      <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
          <h2 class="text-xl font-bold mb-4 text-gray-800">股票筛选</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">行业</label>
              <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                <option>全部</option>
                <option>科技</option>
                <option>金融</option>
                <option>医疗</option>
                <option>消费</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">市值</label>
              <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                <option>全部</option>
                <option>小盘股</option>
                <option>中盘股</option>
                <option>大盘股</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">AI评分</label>
              <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                <option>全部</option>
                <option>5星</option>
                <option>4星及以上</option>
                <option>3星及以上</option>
              </select>
            </div>
          </div>
          <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-300">应用筛选</button>
        </div>
        
        <div class="bg-white rounded-xl shadow-md p-6">
          <h2 class="text-xl font-bold mb-4 text-gray-800">股票列表</h2>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最新价</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">涨跌幅</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AI评分</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="stock in stocks" :key="stock.symbol">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="text-sm font-medium text-gray-900">{{ stock.name }}</div>
                      <div class="text-sm text-gray-500 ml-2">({{ stock.symbol }})</div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">{{ stock.price }}</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="stock.change >= 0 ? 'text-green-600' : 'text-red-600'" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                      {{ stock.change >= 0 ? '+' : '' }}{{ stock.change }}%
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <div class="flex items-center">
                      <span class="text-yellow-400">★</span>
                      <span class="ml-1">{{ stock.aiScore }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <!-- 右侧 - 市场热点和AI洞察 -->
      <div class="space-y-6">
        <div class="bg-white rounded-xl shadow-md p-6">
          <h2 class="text-xl font-bold mb-4 text-gray-800">市场热点</h2>
          <div class="space-y-4">
            <div v-for="(hotspot, index) in marketHotspots" :key="index" class="flex items-center">
              <div class="w-10 h-10 rounded-full flex items-center justify-center mr-4"
                   :class="hotspot.trend === 'up' ? 'bg-red-100' : 'bg-green-100'">
                <span :class="hotspot.trend === 'up' ? 'text-red-600' : 'text-green-600'">
                  {{ index + 1 }}
                </span>
              </div>
              <div>
                <h3 class="font-medium">{{ hotspot.name }}</h3>
                <p class="text-sm text-gray-500">{{ hotspot.description }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-md p-6">
          <h2 class="text-xl font-bold mb-4 text-gray-800">AI洞察</h2>
          <div class="space-y-4">
            <div v-for="(insight, index) in aiInsights" :key="index" class="p-4 bg-blue-50 rounded-lg">
              <h3 class="font-medium text-blue-800 mb-2">{{ insight.title }}</h3>
              <p class="text-sm text-blue-600">{{ insight.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 股票数据
const stocks = ref([
  { name: '贵州茅台', symbol: '600519', price: 1789.99, change: 2.35, aiScore: 4.8 },
  { name: '腾讯控股', symbol: '0700.HK', price: 331.20, change: -0.54, aiScore: 4.5 },
  { name: '阿里巴巴', symbol: 'BABA', price: 84.13, change: 1.23, aiScore: 4.2 },
  { name: '宁德时代', symbol: '300750', price: 205.88, change: 3.45, aiScore: 4.7 },
  { name: '中国平安', symbol: '601318', price: 48.76, change: -0.89, aiScore: 3.9 },
]);

// 市场热点数据
const marketHotspots = ref([
  { name: '新能源汽车', description: '政策利好，销量持续增长', trend: 'up' },
  { name: '半导体芯片', description: '国产替代进程加速', trend: 'up' },
  { name: '医药生物', description: '创新药研发取得突破', trend: 'up' },
  { name: '房地产', description: '行业调控政策持续', trend: 'down' }
]);

// AI洞察数据
const aiInsights = ref([
  { title: '新能源板块机会', description: '根据最新政策分析，新能源汽车产业链或将迎来新一轮增长。' },
  { title: '科技股估值修复', description: '全球科技股估值处于历史低位，部分优质公司已具备长期投资价值。' },
  { title: '医疗健康长期看好', description: '人口老龄化趋势下，医疗健康行业的长期增长潜力巨大。' },
]);
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>